"use client";
import {Avatar, Card, Col, Row, Segmented, Tag} from "antd";
import "./index.css";
import { useSelector } from "react-redux";
import { RootState } from "@/stores";
import Title from "antd/es/typography/Title";
import Paragraph from "antd/es/typography/Paragraph";
import { useState } from "react";
import CalendarChart from "@/app/user/center/components/CalendarChart/page";
import UserInfo from "@/app/user/center/components/UserInfo/page";
import UserInfoEditForm from "@/app/user/center/components/UserInfoEditFrom/page";
import dayjs from "dayjs";
import {USER_ROLE_ENUM, USER_ROLE_TEXT_MAP} from "@/constants/user";

/**
 * 主页
 * @constructor
 */
export default function UserCenterPage() {
  //  获取当前登录用户信息
  const loginUser = useSelector((state: RootState) => state.loginUser);
  const user = loginUser;

  // const [actorTabKey, setActorTebKey] = useState<string>("record");
    const [activeTabKey, setActiveTabKey] = useState<string>("info");
    // 控制用户资料编辑状态的切换
    const [currentEditState, setCurrentEditState] = useState<string>("查看信息");

  // try {
  //   const result = await listQuestionVoByPageUsingPost({
  //     title: searchText,
  //     pageSize: 12,
  //     sortField: "createTime",
  //     sortOrder: "descend",
  //   });
  //   questionList = result.data.records ?? [];
  //   total = result.data.total;
  // } catch (e) {
  //   message.error("获取题目列表失败，" + e.message);
  // }

  return (
    <div id="userCenterPage" className={"max-width-content"}>
      <Row gutter={[16, 16]}>
        <Col xs={24} md={6}>
          <Card style={{ textAlign: "center" }}>
            <Avatar src={user.userAvatar} style={72}></Avatar>
            <div style={{ marginBottom: 16 }}></div>
            <Card.Meta
              title={<Title level={4}>{user.userName}</Title>}
              description={
                <Paragraph type={"secondary"}>{user.userProfile}</Paragraph>
              }
            />
            <Tag
              color={user.userRole === USER_ROLE_ENUM.ADMIN ? "gold" : "grey"}
            >
              {USER_ROLE_TEXT_MAP[user.userRole]}
            </Tag>
            <div style={{ marginTop: 16 }}></div>
            <Paragraph type="secondary" style={{ marginTop: 8 }}>
              注册日期：{dayjs(user.createTime).format("YYYY-MM-DD")}
            </Paragraph>
            <Paragraph
              type="secondary"
              style={{ marginTop: 8 }}
              copyable={{
                text: user.id,
              }}
            >
              我的 id：{user.id}
            </Paragraph>
          </Card>
        </Col>
        <Col xs={24} md={18}>
          <Card
            tabList={[
              {
                key: "info",
                label: "我的信息",
              },
              {
                key: "record",
                label: "刷题记录",
              },
              // {
              //   key: "favorites",
              //   label: "测试表格",
              // },
            ]}
            activeTabKey={activeTabKey}
            onTabChange={(key: string) => {
              setActiveTabKey(key);
            }}
          >
            {activeTabKey === "record" && <CalendarChart />}
            {activeTabKey === "favorites" && <>bbbb</>}
            {activeTabKey === "info" && (
              <>
                <Segmented<string>
                  options={["查看信息", "修改信息"]}
                  value={currentEditState}
                  onChange={setCurrentEditState}
                />
                {currentEditState === "查看信息" && <UserInfo user={user} />}
                {currentEditState === "修改信息" && (
                  <UserInfoEditForm user={user} />
                )}
              </>
            )}
          </Card>
        </Col>
      </Row>
    </div>
  );
}
